<template>
	<!-- 增加和减少商品小球 -->
	<!-- 效果：开始出现+号球，点击1次+号球，出现-号球+数字1-->
	<div class="cartcontrol">
		<!-- 过渡：transition https://cn.vuejs.org/v2/guide/transitions.html -->
		<transition name="move">
			<!-- cart-decrease:减少数量 -->
			<!-- 3.@click.stop.prevent 减少购物车数量事件，另外，v-show，food.count>0（即最少为1）则显示 -->
			<div class="cart-decrease"
					 v-show="food.count>0"
					 @click.stop.prevent="decreaseCart($event)"><!-- 这里不用加this,细节 -->
				<!-- icon-remove_circle_outline看common/stylus/icon.styl -->
				<span class="inner icon-remove_circle_outline"></span>
			</div>
		</transition>
		<!-- cart-count:数量 -->
		<!-- 3.v-show，food.count>0（即最少为1）则显示  + 显示food.count -->
		<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
		<!-- cart-add:增加数量，与上面减少数量相关 -->
		<!--  icon-add_circle看common/stylus/icon.styl -->
		<!-- 在（重点：原生DOM事件）监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle('ok', $event)"。 -->
		<!-- 	
					修饰符
					.stop 	- 	调用 event.stopPropagation()。
					.prevent - 	调用 event.preventDefault()。
					stop:停止冒泡						<button @click.stop="doThis"></button>
					prevent:阻止默认行为		 <button @click.prevent="doThis"></button> 
		-->
		<!-- 2.@click.stop.prevent 添加购物车数量事件 -->
		<div class="cart-add icon-add_circle" @click.stop.prevent="addCart($event)"></div>
	</div>
</template>

<script>
// 1.引入vue
import Vue from 'vue'

export default {
	// 目前接收good.vue传入的food，food是遍历foods得到
	props: {
		food: {
			type: Object
		}
	},
	methods: {
		//2.添加购物车数量事件
		addCart (event) {
			// 　为什么要加click:true???  
			//better-scroll会将点击事件去掉，如果滚动部分需要有点击事件，需要在参数里加上click：true。同时，在PC上或某些手机端，由于未成功将touchend事件move掉，点击事件会执行两次。

			// https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/options.html#directionlockthreshold
			// click:true(goods/index.vue)。。。better-scroll 默认会阻止☆☆☆浏览器的原生 click 事件☆☆☆。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。

			//better-scroll派发的event事件和原生js的event有属性上的区别，其中有一个属性为event._constructed。better-scroll派发的事件中event._constructed为true，原生点击事件中没有这个属性。
			// 如果不存在这个属性,则为原生点击事件，不执行下面的函数
			// 浏览器原生的点击事件
			if (!event._constructed) {
				return //直接返回，不再执行以下操作
			}
			// console.log('click')	//确认可以点击
			// 判断是否有food.count 数目
			if (!this.food.count) {
				// 不存在，则设置count

				// 【】代表参数的的类型
				// Vue.set( 【{Object | Array}】target, 【{string | number}】propertyName/index, 【{any}】value )  返回值：设置的值
				// 向响应式对象中添加一个属性，并确保这个新属性同样是☆☆☆响应式☆☆☆的，且触发视图更新。它必须用于向☆☆☆响应式对象☆☆☆上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')
				Vue.set(this.food,'count',1)//Vue.set接口检测数据的变化 (新属性是响应式的)
				// 第一个是对象，不用引号，第二个是字符串（属性），要引号，第三个为任意值
			} else {
				// 存在，加1，这里后置++，console.log(this.food.count++)是用加操作之前的值，而count是加操作后的值
				this.food.count++
			}
		},
		//3.减少购物车数量事件
		decreaseCart (event) {
			// 浏览器原生的点击事件（具体看上面）
			if (!event._constructed) {
				return //直接返回
			}
			// 判断是否存在food.count
			if (this.food.count) {
				// 自减一
				this.food.count--
			}
		}
	}

}
</script>

<style lang="stylus" scoped>
	// 细节：父元素设置font-size:0,子元素自行设置font-size
	// display:inline-block + padding(左右两个图标padding，中间padding-top) + line-height + font-size + color
	.cartcontrol
		font-size: 0
		.cart-decrease
			display: inline-block
			padding: 6px
			// https://cssreference.io/property/transform/
			// translate3d在3D空间内移动一个元素的位置。x,y,z都为0，则不变，rotate元素围绕一个定点旋转，0代表不变
			transform: translate3d(0, 0, 0) 
			transform: rotate(0)
			// https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E7%9A%84%E7%B1%BB%E5%90%8D
			// 4.过渡，6个阶段：v-enter,v-enter-active,v-enter,v-leave,v-leave-active,v-leave-to (具体看上面网址vue api)
			// 如果你使用了 <transition name="move">，那么 v-enter 会替换为 move-enter。

			// 进入过渡的开始状态 + 离开过渡的结束状态(2.18版本以上)
			&.move-enter, &.move-leave-to
				opacity: 0
				transform: translateX(24px)//开启硬件加速，让动画更流畅
				transform: rotate(180deg)
			// 设置进入和离开动画
			// transition: https://cssreference.io/property/transition/
			// transition-property defaults to all  (属性，默认为全部)
			// transition-duration is set to .4s 		（持续时间，0.4s）
			// transition-timing-function is set to linear	（执行过渡的速率模式，linear线性）
			// transition-delay defaults to 0s （延迟，0s，无延迟）
			// property name | duration | timing function 
 			&.move-enter-active, &.move-leave-active
				transition: all 0.4s linear
				transform: translate3d(0, 0, 0)
				transform: rotate(0)
			.inner
				display: inline-block
				line-height: 24px
				font-size: 24px
				color: rgb(0, 160, 220)
		.cart-count
			display: inline-block
			vertical-align: top
			width: 12px
			padding-top: 6px
			line-height: 24px
			text-align: center
			font-size: 10px
			color: rgb(147, 153, 159)
		.cart-add
			display: inline-block
			padding: 6px
			line-height: 24px
			font-size: 24px
			color: rgb(0, 160, 220)
</style>